<template>
  <div class="enterpage-warpper">
    <div class="driver_bg">
      <p>
        <img src="@/assets/imgs/driver_backgrond.png" />
      </p>
    </div>
    <div class="cate_box">
      <p v-for="(item,index) in catedata" :key="index">
        <input
          type="radio"
          name="cate"
          :id="item.id"
          :value="index"
          :checked="index==checkedNmber"
          @change="checkedValue(index)"
        />
        <label :for="item.id">{{item.text}}</label>
      </p>
    </div>
    <div class="enter-button">
      <p @click="joinWithCar">
        <img src="@/assets/imgs/but_youche.png" />
      </p>
      <p @click="joinWithoutCar">
        <img src="@/assets/imgs/but_wuche.png" />
      </p>
    </div>
  </div>
</template>
<script>
import { Radio } from 'mand-mobile';
import Utils from '@/common/pakjUtils';
export default {
  components: {
    [Radio.name]: Radio
  },
  data() {
    return {
      title: '司机招募',
      cate: '1',
      checkedNmber: '0',
      catedata: [
        {
          text: '专职司机',
          id: 'full_driver'
        },
        {
          text: '兼职司机',
          id: 'part_driver'
        }
      ]
    };
  },
  mounted() {
    try {
      this.setHeader(this.title);
    } catch (e) {
      console.log(e);
    }
  },
  methods: {
    // 设置头部信息
    setHeader(text) {
      /* eslint-disable */
      var os = Utils.getOSName();
      if ((os == 'Linux' || os == 'Android') && handler) {
        //  handler.setTopText(JSON.stringify(text));
      } else if ((os == 'iOS' || os == 'MacOSX') && window.webkit) {
        window.webkit.messageHandlers.setTopText.postMessage(text);
      }
    },
    checkedValue(index) {
      this.checkedNmber = index;
      this.cate = index + 1;
    },
    joinWithCar() {
      this.$router.push({
        name: 'signAward',
        query: {
          haveCar: '1',
          isCity: '1',
          cate: this.cate.toString()
        }
      });
    },
    joinWithoutCar() {
      this.$router.push({
        name: 'signAward',
        query: {
          haveCar: '2',
          isCity: '1',
          cate: this.cate.toString()
        }
      });
    }
  }
};
</script>
<style lang="stylus" scoped>
p {
  display: block;
  margin-block-start: 0px;
  margin-block-end: 0px;
  margin-inline-start: 0px;
  margin-inline-end: 0px;
}

h6 {
  display: block;
  font-size: 22px;
  margin-block-start: 0em;
  margin-block-end: 0em;
  margin-inline-start: 0px;
  margin-inline-end: 0px;
  font-weight: 400;
}

.enterpage-warpper {
  width: 100vw;
}

.driver_bg p img {
  width: 100vw;
  height: 100vh;
  display: block;
  object-fit: cover;
  object-position: top center;
}

.cate_box {
  position: absolute;
  bottom: 300px;
  width: 80%;
  margin: 0px 10%;
  height: 50px;
}

.cate_box p {
  float: left;
  width: 50%;
  text-align: center;
}

.enter-button {
  position: absolute;
  bottom: 20px;
  width: 90%;
  margin: 0px 5%;
}

.enter-button p {
  margin-top: 20px;
}

.enter-button p img {
  width: 100%;
}
</style>
